---
title: Страницы
description: Введение в страницы Astro
i18nReady: true
---

import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

**Страницы** - это файлы, расположенные в директории `src/pages/` вашего проекта. Они отвечают за маршрутизацию, загрузку данных и общий макет страницы для каждой страницы вашего сайта.

## Поддерживаемые типы файлов страниц 

Astro поддерживает следующие типы файлов в директории `src/pages/`:
- [`.astro`](#astro-страницы)
- [`.md`](#markdownmdx-страницы)
- `.mdx` (с [Установленной интеграцией MDX](/ru/guides/integrations-guide/mdx/#installation))
- [`.html`](#страницы-html)
- `.js`/`.ts` (как [API точки](/ru/guides/endpoints/)) 

## Маршрутизация на основе файлов

Astro использует стратегию маршрутизации, называемую **маршрутизация на основе файлов**. Каждый файл в вашей директории `src/pages/` становится точкой входа на вашем сайте на основе его пути к файлу.

Один файл также может генерировать несколько страниц с помощью [динамической маршрутизации](/ru/guides/routing/#динамические-маршруты). Это позволяет создавать страницы, даже если ваш контент находится за пределами специальной директории `/pages/`, например, в [коллекции контента](/ru/guides/content-collections/) или [CMS](/ru/guides/cms/).

<ReadMore>Узнайте больше о [маршрутизации в Astro](/ru/guides/routing/).</ReadMore>

### Ссылки между страницами
Для создания ссылок на другие страницы вашего сайта используйте стандартный HTML-элемент [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) на страницах Astro. Используйте **URL-путь относительно корневого домена** в качестве ссылки, а не относительный путь к файлу.

Например, чтобы создать ссылку на `https://example.com/authors/sonali/` с любой другой страницы на `example.com`:

```astro title="src/pages/index.astro"
Read more <a href="/authors/sonali/">about Sonali</a>.
```

## Astro Страницы

Astro страницы используют расширение файла `.astro` и поддерживают те же функции, что и [компоненты Astro](/ru/basics/astro-components/).

```astro title="src/pages/index.astro"
---
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>
```

Чтобы избежать повторения одних и тех же HTML-элементов на каждой странице, вы можете переместить общие элементы `<head>` и `<body>` в свои собственные [компоненты макета](/ru/basics/layouts/). Вы можете использовать как много, так и мало компонентов макета по своему усмотрению.

Страница должна создавать полный HTML-документ. Если не указано явно, Astro добавит необходимое объявление `<!DOCTYPE html>` и содержимое `<head>` к любому компоненту `.astro`, расположенному по умолчанию в `src/pages/`. Вы можете отказаться от этого поведения для каждого компонента, пометив его как [фрагментную](#фрагменты-страниц) страницу.

Чтобы избежать повторного использования HTML на каждой странице, вы можете переместить общие элементы `<head>` и `<body>` в свои собственные [компоненты макета](/ru/basics/layouts/). Вы можете использовать столько макетов, сколько захотите.


```astro {3} /</?MySiteLayout>/
---
// src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>
```

<ReadMore>Подробнее о [компонентах макета](/ru/basics/layouts/) в Astro.</ReadMore>

## Markdown/MDX Страницы

Astro также обрабатывает любые файлы Markdown (`.md`) внутри `src/pages/` как страницы вашего сайта. Если у вас установлена интеграция [MDX](/ru/guides/integrations-guide/mdx/#installation), она также обрабатывает файлы MDX (`.mdx`). Они обычно используются для страниц с большим объемом текста, таких как записи в блогах и документация.

[Коллекции содержимого страниц в формате Markdown или MDX](/ru/guides/content-collections/) в `src/content/` могут использоваться для [динамической генерации страниц](/ru/guides/routing/#динамические-маршруты).

Макеты страниц особенно полезны для [Markdown файлов](#markdownmdx-страницы). Файлы Markdown могут использовать специальное свойство `layout` в frontmatter для указания [компонента макета](/ru/basics/layouts/), который обернет их содержимое Markdown в полный документ страницы `<html>...</html>`.

```md {3}
---
# Пример: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
title: 'Моя Markdown страница'
---
# Заголовок

Это моя страница, написанная на **Markdown.**
```

<ReadMore>Читайте больше о [Markdown](/ru/guides/markdown-content/) в Astro.</ReadMore>

## Страницы HTML

Файлы с расширением `.html` могут быть помещены в директорию `src/pages/` и использоваться непосредственно в качестве страниц на вашем сайте.
Обратите внимание, что некоторые ключевые возможности Astro не поддерживаются в [HTML-компонентах](/ru/basics/astro-components/#html-компоненты).

## Пользовательская страница ошибки 404

Для создания пользовательской страницы ошибки 404 вы можете создать файл `404.astro` или `404.md` в директории `/src/pages`.

Это приведет к созданию страницы `404.html`. Большинство [сервисов развертывания](/ru/guides/deploy/) найдут и будут использовать ее.

## Фрагменты страниц

<p><Since v="3.4.0" /></p>

:::caution
Фрагменты страниц предназначены для использования в сочетании с фронтенд-библиотекой, такой как  [htmx](https://htmx.org/) или [Unpoly](https://unpoly.com/). Вы также можете использовать их, если вам удобно писать низкоуровневый внешний JavaScript. По этой причине они являются продвинутой функцией.

Кроме того, фрагменты не следует использовать, если компонент содержит область видимости стилей или скрипты, поскольку эти элементы будут удалены из HTML-вывода. Если вам нужны области видимости стилей, лучше использовать обычные, не-фрагментные страницы, а также фронтенд-библиотеку, которая умеет объединять их содержимое в head.
:::

Фрагменты - это компоненты страниц, расположенные в директории `src/pages/`, которые не предназначены для отображения в виде полноценных страниц.

Как и компоненты, расположенные вне этой директории, эти файлы автоматически не включают декларацию `<!DOCTYPE html>`, а также любое содержимое `<head>`, такое как стили и скрипты.

Однако, поскольку они расположены в специальной директории `src/pages/`, сгенерированный HTML доступен по URL, соответствующему пути к файлу. Это позволяет библиотеке рендеринга (например, htmx, Stimulus, jQuery) получить к нему доступ на клиенте и динамически загружать секции HTML на страницу без обновления браузера или перехода по странице.

Фрагменты, в сочетании с библиотекой рендеринга, предоставляют альтернативу [Astro островам](/ru/concepts/islands/) и [`<script>` тегам](/ru/guides/client-side-scripts/) для создания динамического контента в Astro.

Файлы страниц, которые могут экспортировать значение (например, `.astro`, `.mdx`), могут быть помечены как фрагменты.

Настройте файл в директории `src/pages/`, как фрагмент, добавив следующий экспорт:

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---

<li>I'm a partial!</li>
```

`export const partial` должен быть идентифицируемым статически. Он может иметь следующие значения:

- Булево значение __`true`__.
- Переменная окружения, использующая import.meta.env, например `import.meta.env.USE_PARTIALS`.

### Использование с библиотекой

Фрагментные страницы используются для динамического обновления раздела страницы с помощью такой библиотеки, как [htmx](https://htmx.org/).

В следующем примере атрибут `hx-post`  установлен на URL фрагментной страницы. Содержимое фрагментной страницы будет использовано для обновления целевого HTML-элемента на этой странице. 

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>My page</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">Target here</div>

  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      Click Me!
  </button>
</section>
```

Файл с расширением `.astro` для фрагментной страницы должен существовать по соответствующему пути к файлу и включать экспорт, определяющий страницу как фрагментную:

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>I was clicked!</div>
```

Более подробную информацию об использовании htmx см. в [документации htmx](https://htmx.org/docs/).
